<template>
  <header>
    <h1><i class="fa-brands fa-airbnb"></i> AI角色对话</h1>
    <nav>
      <RouterLink to="/" class="lujing">首页</RouterLink>
      <RouterLink to="/chat" class="lujing">我的对话</RouterLink>
    </nav>
  </header>
</template>

<script setup>
import { RouterLink } from 'vue-router';

</script>

<style scoped>
header {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  padding: 25px 30px;
  border-bottom: 1px solid rgba(74, 108, 247, 0.3);
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: space-between;
  /* 左右分布 */
  backdrop-filter: blur(12px);
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 25px 30px;
}

header h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  background-image: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(74, 108, 247, 0.3);

}

nav {
  display: flex;
  width: 200px;
  gap: 40px;
  /* 两个 span 间距 */
  margin-right: 100px;
}

nav .lujing {
  color: #4B5563;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}
</style>
